import { memo, ReactElement } from "react";
import styles from "./index.module.scss";
import Image from "next/image";
import { Row, Col } from "antd";
import type { FC } from "react";
import classNames from "classnames";
import { ICategory } from "@/services/modules/home";
import Link from "next/link";
import { useRouter } from "next/router";
export interface IProps {
  children?: ReactElement;
  categorys?: ICategory[];
}

const CategoryTab: FC<IProps> = memo(function (props) {
  const { categorys = [] } = props;
  const fst4cate: ICategory[] = categorys?.slice(0, 4);
  // console.log(fst4cate);
  const router = useRouter();
  // 点击跳转
  const handleItemClick = (index: number, item: ICategory) => {
    if (index === 0 || index === 1) {
      router.push("/search?q=" + item.title);
    } else if (index === 2) {
      router.push("/detail?id=" + item.cid);
    } else {
      window.open(item.targetUrl);
    }
  };

  return (
    <>
      <div className={styles["container"]}>
        <div className={classNames("wrapper")}>
          <Row>
            {fst4cate?.map((item: ICategory, index: number) => {
              return (
                <Col
                  span={6}
                  key={item.cid}
                  className={styles["col-item"]}
                  onClick={() => handleItemClick(index, item)}
                >
                  <Image
                    src={item.picStr!}
                    alt={"category"}
                    priority
                    className={styles.left}
                    width={48}
                    height={48}
                  />
                  <div className={styles.right}>
                    <div className={styles.title}>{item.title}</div>
                    {item.type === 1 && (
                      <div className={styles["extra"]}>
                        <span className={styles.text}>{item.desc}</span>
                        <span className={styles.count}>{item.count}</span>
                      </div>
                    )}
                  </div>
                </Col>
              );
            })}
          </Row>
        </div>
      </div>
    </>
  );
});

export default CategoryTab;
CategoryTab.displayName = "CategoryTab";
